<template>
<x-header title="slot:overwrite-title">
  <div class="overwrite-title" slot="overwrite-title">
      <button-tab v-if="this.$route.name=='index' || this.$route.name=='list'">
        <button-tab-item :class="this.headerSelect==1?'selected':'unselect'" @on-item-click="gotoUrl('/list/--1--.html')">找车主</button-tab-item>
        <button-tab-item :class="this.headerSelect==2?'selected':'unselect'" @on-item-click="gotoUrl('/list/--2--.html')">找乘客</button-tab-item>
      </button-tab>
      <template   v-else>
        {{headerTitle}}
      </template >
  </div>
  <div slot="overwrite-left" v-on:click="goBack">
  <x-icon type="ios-arrow-back" size="30" style="fill:#ccc;margin-top:-5px;margin-left:-8px"></x-icon>
  </div>
  <div slot="right" v-on:click="openSearch">
  <x-icon type="ios-search-strong" size="30" style="fill:#ccc;margin-top:-5px;margin-right:-5px"></x-icon>
  </div>
</x-header>

</template>

<script>
import { XHeader,ButtonTab, ButtonTabItem  } from 'vux'


export default {
  name: 'SCHeader',
  computed: {
      headerTitle: function(){
        return this.$store.state.lulushunche.headerTitle
      },
      headerSelect: function(){
        if(this.$route.name=='list'){
          var typ=this.$route.params.varstr.split('-');

          if(typ[2]!=''){
            return typ[2];
          }else{
            return 0;
          }
        }else{
          return 0;
        }
      }
  },
  components: {
    XHeader, 
    ButtonTab,
    ButtonTabItem 
  },
  data(){
    return{
      title: '路路顺车'
    }
  },
  methods: {
    goBack () {
      window.history.length > 1
        ? this.$router.go(-1)
        : this.$router.push('/')
    },
    gotoUrl(url) {
        this.$router.push(url)
    },
    openSearch() {
      this.$emit('search')
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.selected{
  color: #FFF;
  background: #04BE02;
}
.unselect{
  color: #ccc !important;
  background: #fff !important;
}
.overwrite-title {
  margin-top: 5px;
  text-align: center;
  line-height: 26px;
  color:#fff;
}
</style>
